<template>
  <div class="album albumvideo">
    <div>
      <div class="pic_img">
        <div class="pic_img_box">
          <el-upload
            class="avatar-uploader"
            :limit="1"
            :headers="headers"
            :action="url"
            :on-progress="uploadVideoProcess"
            :on-success="handleVideoSuccess"
            :before-upload="beforeUploadVideo"
            :show-file-list="false"
          >
            <video
              v-if="videoForm.showVideoPath != '' && !videoFlag"
              :src="videoForm.showVideoPath"
              class="avatar video-avatar"
              controls="controls"
            >
              您的浏览器不支持视频播放
            </video>
            <i
              v-else-if="videoForm.showVideoPath == '' && !videoFlag"
              class="el-icon-plus avatar-uploader-icon"
            ></i>
            <el-progress
              v-if="videoFlag == true"
              type="circle"
              v-bind:percentage="videoUploadPercent"
              style="margin-top: 7px"
            ></el-progress>
          </el-upload>
        </div>
      </div>
    </div>
    <p class="Upload_pictures">
      <span></span>
      <span>最多可以上传1个视频，建议大小20M，推荐格式mp4</span>
    </p>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
export default {
  props: ['type', 'showLod'],
  data() {
    return {
      headers: { Authorization: "Bearer " + getToken() },  
      url: process.env.VUE_APP_BASE_API + "common/upload",
      videoFlag: false,
      //是否显示进度条
      videoUploadPercent: "",
      //进度条的进度，
      isShowUploadVideo: false,
      //显示上传按钮
      videoForm: {
        showVideoPath: ""
      }
    }  
  },
  created() {
    console.log(this.showLod)
  },
  methods: {
    //上传前回调
    beforeUploadVideo(file) {
      console.log(file)
      var fileSize = file.size / 1024 / 1024 < 10;
      if (
        [
          "video/mp4",
          "video/ogg",
          "video/flv",
          "video/avi",
          "video/wmv",
          "video/rmvb",
          "video/mov",
        ].indexOf(file.type) == -1
      ) {
        this.$message.error("请上传正确的视频格式");
        return false;
      }
      if (!fileSize) {
        this.$message.error("视频大小不能超过10MB");
        return false;
      }
      this.isShowUploadVideo = false;
    },
    //进度条
    uploadVideoProcess(event, file, fileList) {
      this.videoFlag = true;
      this.videoUploadPercent = file.percentage.toFixed(0) * 1;
    },
    //上传成功回调
    handleVideoSuccess(res, file) {
      this.isShowUploadVideo = true;
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      this.videoForm.showVideoPath = res.data.fileUrl
      if( this.type == 1) {
        this.$emit('upVideo', {type:'add', val: res.data.fileUrl})
      }else {
        this.$emit('upVideo', {type:'editor', val: res.data.fileUrl})
      }
    }
  },
  watch: {
    showLod:function(n, o) {
      console.log(n)
      if(n) {
        console.log(n)
        this.videoForm.showVideoPath = ''
      }
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
</style>